<template>
  <div class="page bg-white">
    <el-row>
      <el-button
        v-if="hasPermission('dlyrl:oa:claimexpenses:claimingExpenses:add')"
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="add()"
        >新建</el-button
      >
    </el-row>
    <el-table
      :data="dataList"
      isBigData
      isTreeTable
      :cell-style="cellStyle"
      :row-class-name="tableRowClassName"
      :header-cell-class-name="cellHeadStyle"
      style="width: 100%; border: 1px solid #d6cfe2"
      size="small"
      v-loading="loading"
      row-key="id"
      height="calc(100% - 80px)"
      class="table"
    >
      <el-table-column prop="name" show-overflow-tooltip label="名称">
      </el-table-column>
      <!-- <el-table-column
        prop="company.name"
        align="left"
        show-overflow-tooltip
        label="归属企业"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            :underline="false"
            v-if="hasPermission('dlyrl:oa:claimexpenses:claimingExpenses:edit')"
            @click="edit(scope.row.id)"
            >{{ scope.row.company.name }}</el-link
          >
          <el-link
            type="primary"
            :underline="false"
            v-else-if="
              hasPermission('dlyrl:oa:claimexpenses:claimingExpenses:view')
            "
            @click="view(scope.row.id)"
            >{{ scope.row.company.name }}</el-link
          >
          <span v-else>{{ scope.row.company.name }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="isdefault" show-overflow-tooltip label="是否可用" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isdefault"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="0"
            inactive-value="1"
            @change="isdefaultChange(scope.row.aid, scope.row.isdefault)"
          >
          </el-switch>
        </template>
        <!-- <template slot-scope="scope">
            {{ $dictUtils.getDictLabel("yes_no", scope.row.isdefault, '-') }}
        </template> -->
      </el-table-column>
      <el-table-column prop="remarks" show-overflow-tooltip label="备注信息">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        fixed="right"
        :key="Math.random()"
        width="400"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-if="hasPermission('dlyrl:oa:claimexpenses:claimingExpenses:view')"
            type="text"
            size="small"
            icon="el-icon-view"
            @click="view(scope.row.id)"
            >查看</el-button
          >
          <span v-if="scope.row.acquiesce==1">
            <el-button
            v-if="hasPermission('dlyrl:oa:claimexpenses:claimingExpenses:edit')"
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="edit(scope.row.id)"
            >修改</el-button
          >
          <el-button
            v-if="hasPermission('dlyrl:oa:claimexpenses:claimingExpenses:del')"
            type="text"
            size="small"
            icon="el-icon-delete"
            @click="del(scope.row.id)"
            >删除</el-button
          >
          <el-button
            v-if="hasPermission('dlyrl:oa:claimexpenses:claimingExpenses:add')"
            type="text"
            size="small"
            icon="el-icon-circle-plus-outline"
            @click="addChild(scope.row.id, scope.row.name)"
            >添加下级报销费用分类</el-button
          >
          </span>
          
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <ClaimingExpensesForm
      ref="claimingExpensesForm"
      @refreshDataList="refreshList"
    ></ClaimingExpensesForm>
  </div>
</template>

<script>
import ClaimingExpensesForm from "./ClaimingExpensesForm";
import SelectTree from "@/components/treeSelect/treeSelect.vue";
import tableStyles from "../../../../../utils/mixins";
export default {
  mixins: [tableStyles],
  data() {
    return {
      dataList: [],
      loading: false,
      isdefault: false, //是否可用
      isdefaultNum:'',//状态
      companyId:'',
    };
  },
  components: {
    SelectTree,
    ClaimingExpensesForm,
  },
  mounted() {
    this.refreshList();
  },
  watch:{
    '$route'(to,form){
      // this.companyId = this.$route.query.companyId;
      if(to.query.companyId){
        this.refreshList();
      }     
    }
  },
  methods: {
    // 获取数据列表
    refreshList() {
      this.loading = true;
      this.$http({
        url: "/dlyrl/oa/claimexpenses/claimingExpenses/treeData?companyId="+this.$route.query.companyId,
        method: "get",
      }).then(({ data }) => {
        this.dataList = data.treeData;
        this.loading = false;
      });
    },
    //是否转换
    isdefaultChange(aid, isdefault) {
      this.$http({   
        url: "/dlyrl/oa/claimexpenses/claimingExpenses/updateDefault",
        method: "post",
        params: { 
          id: aid,
          isDefault: isdefault
        },
      }).then(({ data }) => {
        this.refreshList()
      });
    },
    // 新增下级
    addChild(id, name) {
      this.$refs.claimingExpensesForm.init("addChild", {
        id: "",
        parent: { id: id, name: name },
        companyId:this.$route.query.companyId
      });
    },
    // 新增
    add() {
      this.$refs.claimingExpensesForm.init("add", {
        id: "",
        parent: { id: "", name: "" },
        companyId:this.$route.query.companyId
      });
    },
    // 修改
    edit(id) {
      this.$refs.claimingExpensesForm.init("edit", {
        id: id,
        parent: { id: "", name: "" },
        companyId:this.$route.query.companyId
      });
    },
    // 查看
    view(id) {
      this.$refs.claimingExpensesForm.init("view", {
        id: id,
        parent: { id: "", name: "" },
        companyId:this.$route.query.companyId
      });
    },
    // 删除
    del(id) {
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http({
          url: "/dlyrl/oa/claimexpenses/claimingExpenses/delete",
          method: "delete",
          params: { id: id },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.refreshList();
          }
          this.loading = false;
        });
      });
    },
  },
};
</script>